// ======================== { Chats } ====================

.chats
  margin:0
  padding: 0

.chats li 
  list-style: none
  padding: 5px 0
  margin: 10px auto

.chats li img.avatar
  height: 45px;
  width: 45px;
  -webkit-border-radius: 50% !important
     -moz-border-radius: 50% !important
          border-radius: 50% !important


.chats li.in img.avatar 
  float: left
  margin-right: 10px
  margin-left: 10px

.chats li .name
  display:block
  font-weight: 400
  margin-bottom : 10px

.chats li .datetime
  color:$gray-plus-color
  font-size: 13px
  font-weight: 400

.chats li.out img.avatar 
  float: right
  margin-left: 10px
  margin-right: 10px

.chats li .message 
  display: block
  padding: 15px
  position: relative

.chats li.in .message 
  text-align: left
  margin-left: 75px
  margin-right : 75px
  background-color: $gray-bakcground-color
  +border-radius(5px)


.chats li.in .message .body-img
  display: block
  margin-bottom: 10px
  & > img 
      margin-right:5px

.chats li.in .message .arrow 
  display: block
  position: absolute
  top: 15px
  left: -8px
  width: 0
  height: 0 
  border-top: 8px solid transparent
  border-bottom: 8px solid transparent
  border-right: 8px solid $gray-bakcground-color

.chats li.out .message .arrow
  display: block
  position: absolute
  top: 15px
  right: -8px
  border-top: 8px solid transparent
  border-bottom: 8px solid transparent
  border-left: 8px solid $modal-blue-background-color


.chats li.out .message
  margin-right: 75px
  margin-left: 75px
  background: $modal-blue-background-color
  text-align: right
  +border-radius(5px)

.chats li.out .name, 
.chats li.out .datetime
  text-align: right


.chats li .message .body
  display: block
  color : $gray-plus-color
  margin-bottom: 10px

.chat-form
  margin-top: 15px
  padding: 10px
  background-color: #e9eff3
  overflow: hidden
  clear: both

.chat-form .input-cont
  margin-right: 40px

.chat-form .input-cont .form-control
  width: 100% !important
  margin-bottom: 0px


.chat-form .input-cont input
  border: 1px solid #ddd
  width: 100%  !important
  margin-top: 0

.chat-form .input-cont input 
  background-color: #fff !important;

.chat-form .input-cont input:focus
  border: 1px solid #4b8df9 !important;

.chat-form .btn-cont
  margin-top: -42px
  position: relative
  float: right
  width:44px


.chat-form .btn-cont .arrow 
  position: absolute
  top: 17px
  right: 43px
  border-top: 8px solid transparent
  border-bottom: 8px solid transparent
  border-right: 8px solid #4d90fe
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box 

.chat-form .btn-cont:hover .arrow 
  border-right-color: #0362fd

.chat-form .btn-cont:hover .btn
  background-color: #0362fd;

.chat-form .btn-cont .btn
  margin-top: 8px;



// ======================== { ChatList } ====================
.do-chatlist-row
  display:inline-block
  width: 100%

.do-chatlist
  margin:0
  padding: 0
  color : $gray-plus-color


.do-chatlist > .do-chatlist-item 
  list-style: none
  padding: 5px 0
  margin: 10px auto

.do-chatlist  .pho-img
    float: left
    margin-left: 10px
    margin-right: 10px
    height: 45px;
    width: 45px;
    -webkit-border-radius: 50% !important
    -moz-border-radius: 50% !important
    border-radius: 50% !important

.do-chatlist  .do-user-info
    position: relative
    display: block
    text-align:left
    padding:15px
    margin-left: 50px

.do-chatlist  .do-user-info .do-icon-return 
    position: absolute
    right: 0
    top: 0

.do-icon-return > i
    display: inline-block
    @include sprite($return)
    margin-right: 5px
    &:hover
        @include sprite($return-down)


.do-chatlist .do-user-name
    display: inline-block
    width: 200px
    & > li
        display: inline-block
        margin-bottom: 10px
        margin-right: 5px

.do-chatlist .do-user-detail    
    font-size: 12px
    margin-bottom:10px
    @extend .do-chatlist-row
    & > li 
        display: inline-block
        margin-right:10px

.do-user-info  .do-user-msg
    @extend .do-chatlist-row
    
.do-user-info .do-user-record
    font-size: 12px
    @extend .do-chatlist-row
    & > li 
        display: inline-block
        margin-right:5px
        color:$gray-color

.do-chatlist .do-user-msg-img
    @extend .do-chatlist-row

.do-chatlist .do-user-msg-img img
  display: inline-block
  width: 80px
  height: 80px
  margin-right: 5px
  margin-top: 20px

.do-chatlist > .do-list-tool
  display: block

.do-chatlist  .do-detail-util 
    display: inline-block
    font-size: 12px
    float: right
    margin-right: 10px

.do-chatlist  .do-info-detail
    display: inline-block
    margin-left: 90px
    width: 200px
    line-height: 30px

.do-chatlist  .do-info-detail >li
    display: inline-block
    margin-bottom: 10px
    margin-right: 5px
    font-size: 12px


.do-chatlist  .do-detail-util > li
  display: inline-block
  margin-left: 10px

.do-chatlist .do-msg-closeTime
  float: right
  display: inline-block
  color: $orange-color

.do-chatlist .do-pho-img
  display: block
  width: 45px

.do-chatlist .do-pho-img > li
  float: left
  position: relative

.do-chatlist .do-pho-img > li > .do-pho-vip
  @include sprite($user-state-bg)
  display: block
  position: absolute
  top:50px
  left: 16px
  text-align: center
  line-height: 32px
  color: $white-color

.do-chatlist .do-pho-img > li > .do-pho-btn
  position: absolute
  top:90px
  left: 10px

.do-chatlist .do-list-tool > .do-last-reply
  background-color:$select-status-color
  padding:10px
  margin-left: 65px
  margin-right: 10px
  border-radius:5px

.do-chatlist .do-list-tool > .do-last-reply > .do-reply-bold
  font-weight: blod

  /* ===================== .do-panel-userinfo=========== */
.do-panel-userinfo
    display: block
    margin:15px
    padding: 5px
    color : $gray-plus-color
    background-color:$select-status-color
    border-bottom:2px solid  $border-bottom-color

.do-panel-userinfo > .do-user-img
    // display: inline-block
    float:left
    margin:5px
    height: 45px;
    width: 45px;
    -webkit-border-radius: 50% !important
    -moz-border-radius: 50% !important
    border-radius: 50% !important

.do-panel-userinfo > .do-user-detail
    margin-left: 55px    

.do-panel-userinfo  .do-user-list
    display: inline-block
    margin-top: 10px
    margin-left: 5px
    & > .do-user-sendtime
        font-size: 12px
.do-panel-mod-title
    font-size: 16px
    margin-left: 15px

.do-panel-userinfo .do-user-list > .do-user-name
    margin-bottom: 10px
    font-weight: bold

.do-panel-userinfo .do-user-list > .do-user-message
    margin-bottom: 10px

.do-panel-userinfo .do-user-list > .do-user-sendtime
    color:$gray-color

.do-panel-userinfo-form 
    padding-left:15px
    padding-right:20px
    & > textarea
        width: 100%
.do-panel-userinfo-btn
    float: right
    margin-right: 15px
    margin-top: 10px

// ===================={do-border}===============
.do-chatlist .do-border-warp
    padding-left:15px
    padding-right:15px
    
.do-chatlist .do-border
    border-bottom:1px solid $border-color 
    display: inline-block
    width: 100%
